import { lazy, createElement, Suspense, ComponentType } from "react";
import { Routes, Route } from "react-router-dom";
import NotFound from "../pages/NotFound/NotFound";
import LazyLoading from "../pages/LazyLoading/LazyLoading.tsx";

// 封装懒加载组件 lazy与Suspense配合使用
const lazyElement = (
  element: () => Promise<{
    default: ComponentType<any>;
  }>,
) => (
  <Suspense fallback={<LazyLoading />}>{createElement(lazy(element))}</Suspense>
);

export default function RouteView() {
  return (
    <Routes>
      <Route
        path="/"
        element={lazyElement(() => import("../layout/Layout.tsx"))}
      ></Route>
      <Route
        path="/preview"
        element={lazyElement(() => import("../pages/Preview/Preview.tsx"))}
      ></Route>
      <Route
        path="/example"
        element={lazyElement(() => import("../pages/Example/Example.tsx"))}
      ></Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}
